<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./gwc.css">
    <script src="./js/getData.js"></script>
</head>
<body>
    <div class="box">
        <h2>商品列表</h2>
        <ul>
            <!-- <li>
                <img src="img/01.png" alt="">
                <h3>米家电磁炉</h3>
                <p>249元</p>
                <button>加入购物车</button>
            </li>
            <li>
                <img src="img/03.png" alt="">
                <h3>小米USB Type C快速充电数据线</h3>
                <p>16.9元</p>
                <button>加入购物车</button>
            </li>
            <li>
                <img src="img/02.png" alt="">
                <h3>小米随身手电筒</h3>
                <p>79元</p>
                <button>加入购物车</button>
            </li>
            <li>
                <img src="img/03.png" alt="">
                <h3>米家压力IH电饭煲1S</h3>
                <p>899元</p>
                <button>加入购物车</button>
            </li>
            <li>
                <img src="img/04.png" alt="">
                <h3>空调（1.5匹/变频/一级能效）</h3>
                <p>1999元</p>
                <button>加入购物车</button>
            </li> -->
        </ul>
        <main>
            <table>
                <thead>
                    <tr>
                        <th>全选</th>
                        <th>商品</th>
                        <th>数量</th>
                        <th>单价</th>
                        <th>小计</th>
                        <th>操作</th>
                        <th>时间</th>
                    </tr>
                </thead>

                <tbody>
                   <!--  <tr>
                        <td><input type="checkbox" class="checkBox"></td>
                        <td>
                            <dl>
                                <dt><img src="img/01.png" alt=""></dt>
                                <dd class="dd">米家电磁炉</dd>
                            </dl>
                        </td>
                        <td><input type="button" value="-" class="subtracts"><input type="number" value="1" class="quantity"><input type="button" value="+" class="plus"></td>
                        <td class="unitPrice">249元</td>
                        <td class="Subtotal">249元</td>
                        <td><button onclick="del()">删除</button></td>
                        <td class="times">下午5:05:39</td>
                    </tr> -->
                </tbody>

                <tfoot>
                    <tr>
                        <td><input type="checkbox">全选按钮</td>
                        <td><button>删除选中商品</button></td>、
                        <td colspan="4">
                        <td>总价：<br/>
                            <span>249</span></td></td>
                    </tr>
                </tfoot>
            </table>
        </main>
    </div>
    <script>
        var ul = document.querySelector('ul');
        console.log(ul)
        var dataObj = JSON.parse(localStorage.dataObj);
        console.log("dataObj:",dataObj);
        

        //头部渲染页面
        function showTheard(){
            var str = "";
            for(var i = 0 ; i < dataObj.length ; i++){
                str +=`
                    <li>
                        <img src="img/02.png" alt="">
                        <h3>${dataObj[i].name}</h3>
                        <p>${dataObj[i].price}元</p>
                        <button class = "btn" onclick='add("${dataObj[i].goodsid}","${dataObj[i].image}","${dataObj[i].name}","${dataObj[i].price}")'>加入购物车</button>
                    </li> 
                `
            }
            ul.innerHTML = str;
        }
        showTheard();

        //dom获取
        var tbody = document.querySelector("tbody");
        console.log("tbody:",tbody);
        var arr = []; //商品列表数据变量名
        var obj;

        //点击事件
        function add(goodsId,image,name,price){
            console.log("dbjsagduabcsbvo")
            var shu = 1;
            var xiaoji = price/1*shu //小计 = 单价 * 数量
            //console.log("xiaoji:",xiaoji);
            obj = {
                id : goodsId, //id
                img : image,  //照片
                name : name, //商品名称
                price : price,  //单价
                shu : shu, //数量
                xiaoji : xiaoji  //小计
            }
            arr.push(obj);
            console.log("arr:",arr)
            localStorage.arr = JSON.stringify(arr);
            show();

        }

       
        //tbody页面渲染
        var str1;
        function show(){
            str1 = "";
            for(var i = 0 ; i < arr.length ; i++){
                str1 +=`
                <tr>
                        <td><input type="checkbox" class="checkBox"></td>
                        <td>
                            <dl>
                                <dt><img src="img/01.png" alt=""></dt>
                                <dd class="dd">${arr[i].name}</dd>
                            </dl>
                        </td>
                        <td><input type="button" value="-" onclick="subtracts(${arr[i].id})">
                            <input type="number" value="1" class="quantity1">
                            <input type="button" value="+" onclick="plus(${arr[i].id})"></td>
                        <td class="unitPrice">${arr[i].price}元</td>
                        <td class="Subtotal">${arr[i].xiaoji}元</td>
                        <td><button onclick="del(${arr[i].id})">删除</button></td>
                        <td class="times">下午5:05:39</td>
                    </tr>
                `
            }
            tbody.innerHTML = str1;

        }
    </script>
</body>
</html>